import React from 'react';
import { ConfigProvider, theme } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import Router from './router';
import './App.css';
import { ThemeContext } from './context/ThemeContext';

const { defaultAlgorithm, darkAlgorithm } = theme;

function App() {
  const [isDark, setIsDark] = React.useState<boolean>(() => {
    return localStorage.getItem('theme') === 'dark';
  });

  React.useEffect(() => {
    document.body.classList.toggle('dark-mode', isDark);
    localStorage.setItem('theme', isDark ? 'dark' : 'light');
  }, [isDark]);

  const toggleDark = () => setIsDark(prev => !prev);

  return (
    <ThemeContext.Provider value={{ isDark, toggleDark }}>
      <ConfigProvider 
        locale={zhCN}
        theme={{ algorithm: isDark ? darkAlgorithm : defaultAlgorithm }}
      >
        <div className="App">
          <Router />
        </div>
      </ConfigProvider>
    </ThemeContext.Provider>
  );
}

export default App;
